/* popover 表单 滚动监控和 失焦监控
*  单独写,因为 use-form-popover.js 有可能会被非popForm 文件引入
*  一般在 浮窗表单页引入 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

/* @params {Boolean} visible 是否显示popover,一般为 modelValue.value
* */
export default function usePopoverForm(visible, formData) {
    const loading = ref(false)
    // 控制pop的显示与隐藏
    const popRef = ref()

    //关闭popover
    const popClose = () => {
        visible.value = false
    }
    /* 根据id获取数据
    * @params {function} apiMethod 为获取数据的api
    * @params {number} id 为获取数据的id
    * */
    const getFormDataById = async (id, apiMethod) => {
        if ( !id) {
            ElMessage.error('数据获取失败！')
            popClose()
            return
        }
        loading.value = true
        try {
            const res = await apiMethod(id)
            Object.keys(formData).forEach(key => {
                formData[key] = res.data[key]
            })
        } catch (e) {
            popClose()
            throw new Error(e)
        } finally {
            loading.value = false
        }
    }
    return {
        getFormDataById,
        popClose,
        loading,
        popRef
    }
}
